<template>
    <div class="fillcontain">
        <FORM name=form1    action="" method=post><!--startprint-->
            <div id="printarea" style="width: 100%">
                <div align="center" style="width: 630px;margin-left: auto;margin-right: auto">
                    <div style="float: right;"><b>{{chargefee.chargeorder}}</b></div>
                    <div align="center"><b>X-RAY街舞连锁-学员交费确认单</b></div>
                    <TABLE style="margin-top: 20px" class="printclass" width="630" border="1" align="center"
                           cellPadding=2    cellSpacing=0
                    bordercolor="#000000" id=ForAllPrintleft>
                    <TBODY>
                    <TR id="" bgColor="#698eda">
                        <TD colspan="4" align="center" style="width: 100%" bgColor=#FFFFFF    height=27>
                            <strong>学员基本信息</strong>
                        </TD>
                    </TR>
                    <TR id="" bgColor=#698eda    height=32>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">姓名：{{chargefee.username}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">性别：{{chargefee.sexdesc}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">年龄：{{chargefee.age}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">出生年月：{{chargefee.birthdaySr}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                    </TR>

                    <TR id="ForPrintTitle2" bgColor=#698eda    height=32>
                        <TD colspan="2" bgColor=#FFFFFF>
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">联系方式：{{chargefee.tel}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD colspan="2" align=middle    bgColor=#FFFFFF>
                            <div align="left">微信号：{{chargefee.weixin}}</div>
                            <DIV align=center>
                                <DIV class=style10    align=center></DIV>
                            </DIV>
                        </TD>
                    </TR>
                    <TR id="ForPrintTitle" bgColor="#698eda">
                        <TD colspan="2" align=middle    bgColor=#FFFFFF>
                            <div align="left">就读学校：{{chargefee.educateschool}}</div>
                            <DIV align=center>
                                <DIV class=style10    align=center></DIV>
                            </DIV>
                        </TD>
                        <TD colspan="2" align=middle    bgColor=#FFFFFF>
                            <div align="left">家庭住址：{{chargefee.address}}</div>
                            <DIV align=center>
                                <DIV class=style10    align=center></DIV>
                            </DIV>
                        </TD>
                    </TR>
                    <TR id="ForPrintTitle1" bgColor="#698eda">
                        <TD colspan="4" align="center" style="width: 100%" bgColor=#FFFFFF    height=27>
                            <strong>学员的缴费信息</strong>
                        </TD>
                    </TR>
                    <TR id="" bgColor=#698eda    height=32>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">卡类：{{chargefee.carddesc}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">类别：{{chargefee.chargetypedesc}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">授课老师：{{chargefee.ename}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD bgColor=#FFFFFF   style="width: 25%">
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">舞种：{{chargefee.subjects}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                    </TR>


                    <TR id="" bgColor=#698eda    height=32>
                        <TD colspan="2" bgColor=#FFFFFF>
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">学费原价：{{chargefee.srccharge}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD colspan="2" align=middle    bgColor=#FFFFFF>
                            <div align="left">实缴金额：{{chargefee.chargetotal}}(类型:现金{{chargefee.chargecash}}元,其他:{{chargefee.paytypedesc}}):{{chargefee.otherCharge}}元</div>
                            <DIV align=center>
                                <DIV class=style10    align=center></DIV>
                            </DIV>
                        </TD>
                    </TR>

                    <TR id="" bgColor=#698eda    height=32>
                        <TD colspan="2" bgColor=#FFFFFF>
                            <DIV align=center    class=STYLE20    STYLE5 STYLE1>
                                <DIV align=center    class=style10>
                                    <div align="left">赠品：{{chargefee.giftname}}</div>
                                </DIV>
                            </DIV>
                            <DIV align=center    class=STYLE21    STYLE6 STYLE2></DIV>
                        </TD>
                        <TD colspan="2" align=middle    bgColor=#FFFFFF>
                            <div align="left">备注：{{chargefee.ordercomments}}</div>
                            <DIV align=center>
                                <DIV class=style10    align=center></DIV>
                            </DIV>
                        </TD>
                    </TR>

                    <TR id="" bgColor=#698eda    height=230>
                        <TD colspan="4" align="center" style="width: 100%" bgColor=#FFFFFF    height=27>
                            <strong>学员须知</strong></TD>
                    </TR>
                    </TBODY>
                    </TABLE>
                    <div align="center" style="width:100%; height:35px; padding-top:8px">
                        您本次缴纳共计{{chargefee.timesofclass}}课时,有效期：{{chargefee.beginTimeSr}}到{{chargefee.endTimeSr}}&nbsp;&nbsp;(起止日期仅供参考),感谢您！！
                        <p style="margin-top:5px;">
                            请您自习阅读以上信息,确认无误并已知晓,请确认签字！  (盖章处)　    &nbsp;&nbsp;
                        </p>
                    </div>
                    <div style="width: 100%">
                        <div style="float: right">单位盖章</div>
                        <div align="left" style="margin-left: 60px">经办人:{{chargefee.operatorname}}</div>
                    </div>
                    <div style="width: 100%">
                        <div style="float: right">缴费日期</div>
                    </div>


                </div>


                <!--endprint-->

            </div>
            <div align="center" style="width:100%; height:35px; padding-top:8px;margin-top: 10px">
                <p>管理操作：
                    <input class="back" type="button" name="print32" value="预览并打印" @click="preview">
                    <a href="http://localhost:8002/#/manage?dfdf" class="back">返回首页</a>


                </p>
                <p>&nbsp;</p>
                <p></p>
            </div>
        </FORM>
    </div>
</template>
<style>
    .STYLE3 {
        color: #000000
    }

    body {
        margin-left: 0px;
        margin-top: 20px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: #FFF;
    }

    .printclass {
        border: 1px solid #000000;
        border-collapse: collapse;
    }

    body, td, th {
        font-size: 13px;
    }

    .back, input.back {
        width: 115px;
        height: 30px;
        color: #fff;
        background-color: #5cb85c;
        border-radius: 6px;
        box-sizing: border-box;
        font-size: 12px;
        padding: 6px 8px;
        text-decoration: none;
    }

    .back:hover, input.back:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

</style>
<script>
    export default {
        data() {
            return {
                chargefee: null,
            }
        },
        created() {
            this.chargefee = this.$route.params.chargefee;

        },
        mounted() {

        },
        methods: {
            preview() {
                let prnhtml = document.getElementById('printarea').innerHTML;
                alert(prnhtml);
                window.document.body.innerHTML = prnhtml;
                window.print();

            }
        }
    }

    /* function preview() {
         bdhtml = window.document.body.innerHTML;
         sprnstr = "<!--startprint-->";
         eprnstr = "<!--endprint-->";
         prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17);
         prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
         window.document.body.innerHTML = prnhtml;
         window.print();
     }*/
</script>
